<template>
    <div class="map-container">
        <div ref="chart" style="width: 100%; height: 800px;"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import jiangxiMap from "../assets/jiangxi.json"; // 引入江西省地图数据

export default {
    name: "JiangxiMap",
    data() {
        return {
            myChart: null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            // 注册地图
            echarts.registerMap("jiangxi", jiangxiMap);

            // 初始化图表
            this.myChart = echarts.init(this.$refs.chart);

            // 江西省各个市区的经纬度数据
            const cityData = [
                { value: [115.8585, 28.6765] },
                { value: [115.9728, 29.7416] },
                { value: [117.1835, 29.2671] },
                { value: [113.8595, 27.6231] },
                { value: [114.9295, 27.8196] },
                { value: [114.9328, 25.8431] },
                { value: [114.3953, 27.8105] },
                { value: [117.9235, 28.4453] },
                { value: [114.9948, 27.1162] },
                { value: [116.3799, 27.9498] },
            ];

            // 定义两点之间的连线数据
            const lineData = [
                {
                    fromName: "南昌市",
                    toName: "九江市",
                    coords: [
                        [115.8585, 28.6765], // 南昌市的经纬度
                        [115.9728, 29.7416], // 九江市的经纬度
                    ],
                },
            ];

            // 地图配置
            const option = {
                title: {
                    text: "江西省地图", // 标题文本
                    subtext: '江西省地图',
                    left: "center", // 标题位置，水平居中
                    textStyle: {
                        color: "#333", // 标题文字颜色
                        fontSize: 20, // 标题文字大小
                        fontWeight: "bold", // 标题文字粗细
                    },
                },
                series: [
                    {
                        name: "标记",
                        type: "effectScatter", // 使用 effectScatter 类型以支持涟漪效果
                        coordinateSystem: "geo", // 使用地理坐标系
                        roam: false, // 允许缩放和平移
                        data: cityData,
                        symbolSize: 6, // 设置标记大小
                        label: {
                            show: true,
                            formatter: "{b}", // 显示城市名称
                            color: "#fff", // 标签文字颜色
                            fontSize: 12, // 标签文字大小
                        },
                        itemStyle: {
                            color: "#000", // 标记颜色
                            borderColor: "#000", // 标记边框颜色
                            borderWidth: 1, // 标记边框宽度
                        },
                        rippleEffect: {
                            brushType: "stroke", // 波纹的绘制方式
                            scale: 2.5, // 波纹的缩放比例
                            color: "#000", // 波纹的颜色
                            period: 4, // 波纹的动画周期
                        },
                        showEffectOn: "render", // 在渲染完成后显示波纹效果
                    },
                    {
                        name: "连线",
                        type: "lines",
                        coordinateSystem: "geo", // 使用地理坐标系
                        data: lineData.map((item) => ({
                            fromName: item.fromName,
                            toName: item.toName,
                            coords: item.coords,
                        })),
                        lineStyle: {
                            color: "#000", // 线的颜色
                            width: 1, // 线的宽度
                            opacity: 1, // 线的透明度
                            curveness: -0.4, // 线的弯曲度
                        },
                    },
                ],
                geo: {
                    map: "jiangxi",
                    roam: false, // 允许缩放和平移
                    label: {
                        show: true,
                        color: "#fff",
                    },
                    itemStyle: {
                        areaColor: "#007acc", // 默认区域颜色
                        borderColor: "#fff", // 默认边框颜色
                        borderWidth: 1, // 默认边框宽度
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: "#000", // 高亮时的文字颜色（黑色）
                            fontSize: 12, // 高亮时的文字大小
                        },
                        itemStyle: {
                            areaColor: "#888", // 高亮时的区域颜色（灰色）
                            borderColor: "#fff", // 高亮时的边框颜色
                            borderWidth: 1, // 高亮时的边框宽度
                        },
                    },
                },
            };

            // 设置地图配置
            this.myChart.setOption(option);
        },
    },
};
</script>
  
<style scoped>
.map-container {
    width: 100%;
    height: 800px;
}
</style>